@import "../../../styles/colors.less";

page {
  height: 100%;
  background-color: #f8f7fa;

  .all-task-list {
    box-sizing: border-box;
    padding: 60px 56px;

    .button-bar {
      display: flex;
      margin-bottom: 30px;

      .btn {
        flex: 1;
        font-size: 26px;
        padding: 12px 9px;
        background-color: #fff;
        color: @purple100;
        white-space: nowrap;
        margin-left: 0;
        border-radius: 30rpx;
        border: 1px solid @purple100;

        &:after {
          border: none;
        }

        &:not(:last-child) {
          margin-right: 13px;
        }

        &:last-child {
          margin-right: 0;
        }

        &.active {
          background-color: @purple100;
          color: #fff;
        }
      }
    }

    .task-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

      .task-card {
        margin-bottom: 48px;

        .title {
          font-size: 40rpx;
          white-space: nowrap;
        }
      }
    }

    .at-modal__container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 640px;
      height: 890px;
      background-color: #fff;
      border-radius: 16px;
      padding: 80px 72px 60px;
      box-sizing: border-box;

      .task-dialog-content {
        min-height: inherit;
        max-height: inherit;

        .task-modal-image {
          margin-top: 24px;
          width: 288rpx;
          height: 288rpx;
          border-radius: 50%;
          display: block;
          z-index: 0;
          margin: 0 auto;
        }

        .tip-title {
          display: block;
          font-size: 60px;
          color: #000;
          margin-bottom: 126px;
          text-align: center;
          font-weight: 600;
        }

        .tip-message {
          display: block;
          font-size: 34px;
          color: #000;
          text-align: center;
          margin-bottom: 16px;
        }

        .title {
          display: block;
          text-align: center;
          font-size: 44px;
        }
      }

      .at-modal__footer {
        padding: 0;
      }

      .btn-know {
        height: 80px;
        line-height: 80px;
        border-radius: 30px;
        background-color: #6c63ff;
        color: #fff;
      }
    }
  }
}
